import React, { Component } from 'react';
import {
    View,
    Text,
    Alert
} from 'react-native';
import { MapView, Marker, MultiPoint } from 'react-native-amap3d'
export default class Map extends Component {

	_points = Array(10).fill(0).map(i => ({
		id: '1',
		latitude: 22.6 + Math.random(),
		longitude: 113 + Math.random(),
		title: '叫爹！'
	}))

	// point表示当前点击的图标，可通过它获取到该坐标的信息,
	// 即上方自定义的id，latitude，longitude，title等等。
	// 注意：point后面的字段必须为string类型，可用toString转换，point.title.toString()
	_onItemPress = point => Alert.alert(point.title)
    
    render() {
        return (
            <View style={{flex: 1}}>
            	<MapView
            		style={{flex: 1}}
            		// 视图默认显示的位置
				    coordinate={{
				      latitude: 22.617302,
				      longitude: 113.868608,
				    }}
				    locationEnabled
				    showsLocationButton={true}
				    // // 地图倾斜角度
				    tilt={90}
				    // // 目前高德地图支持5种地图模式
				    // mapType='standard'
				>
					<Marker
						// 表示用户的位置是否显示为活动中，为true时才显示下面的title
					    active={true}
					    title='当前位置'
					    color='red'
					    // description='Hello world!'
					    // 定位用户的位置
					    coordinate={{
					      latitude: 22.617302,
					      longitude: 113.868608,
					    }}
					  />
					  <MultiPoint
					    image='point'
					    points={this._points}
					    onItemPress={this._onItemPress}
					  />
				</MapView>
            </View>
        )
    }
}

